<template>

        <div>

            <!--统计数据-->
            <div class="dataTotalDiv">

                <div class="dataDetailDiv green">
                    <div class="detailDataDiv">
                        <div>学生统计</div>
                        <div>
                            <strong style="font-size: 22px">{{hashmap.stuNum}}</strong>
                        </div>
                        <div>当前分类总记录数</div>
                    </div>
                    <div><el-tag>实时</el-tag></div>
                </div>
                <div class="dataDetailDiv red">
                    <div class="detailDataDiv">
                        <div>访客人数</div>
                        <div>
                            <strong style="font-size: 22px">{{hashmap.allNum}}</strong>
                        </div>
                        <div>当前分类总记录数</div>
                    </div>
                    <div><el-tag>实时</el-tag></div>
                </div>
                <div class="dataDetailDiv blue">
                    <div class="detailDataDiv">
                        <div>报修数量</div>
                        <div>
                            <strong style="font-size: 22px">{{hashmap.repairNum}}</strong>
                        </div>
                        <div>当前分类总记录数</div>
                    </div>
                    <div><el-tag>实时</el-tag></div>
                </div>
                <div class="dataDetailDiv yellow">
                    <div class="detailDataDiv">
                        <div>学生统计</div>
                        <div>
                            <strong style="font-size: 22px">{{hashmap.noStuRoomNum}}</strong>
                        </div>
                        <div>当前分类总记录数</div>
                    </div>
                    <div><el-tag>实时</el-tag></div>
                </div>


            </div>

            <!--echarts-->
            <div>

                <div id="main" style="width: 100%;height: 500px"></div>
            </div>


            <el-button @click="showTu">图</el-button>

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="60%">
                <span>

                    <div id="main1" style="width: 100%;height: 500px"></div>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
            </el-dialog>


        </div>


</template>

<script>

    import * as echarts from 'echarts';

    export default {
        name: "count",
        data(){
            return {
                hashmap:{},
                dialogVisible:false,
            }
        },
        watch:{
        },
        methods:{
            showTu(){
                this.dialogVisible = true;
                setTimeout(()=>{
                    this.initEchartsData1();
                },10)
            },
            initData(){

                this.axios.post("/sushestu/count/detail").then(res=>{
                    let myresult = res.data;
                    this.hashmap = myresult.data;
                    this.initEchartsData();
                })

            },
            initEchartsData1(){

                let xarr = this.hashmap.roomNumCount.map(c=>c.name);
                let yarr = this.hashmap.roomNumCount.map(c=>c.currentNum);

                var chartDom = document.getElementById('main1');
                var myChart = echarts.init(chartDom);
                var option = {
                    xAxis: {
                        type: 'category',
                        data: xarr
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yarr,
                            type: 'bar'
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            initEchartsData(){

                let xarr = this.hashmap.roomNumCount.map(c=>c.name);
                let yarr = this.hashmap.roomNumCount.map(c=>c.currentNum);

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option = {
                    xAxis: {
                        type: 'category',
                        data: xarr
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yarr,
                            type: 'bar'
                        }
                    ]
                };
                option && myChart.setOption(option);
            }

        },
        created(){
            this.initData()
        }
    }
</script>

<style scoped>

    .dataTotalDiv{
        display: flex;
        justify-content: space-between;
    }
    .dataDetailDiv{
        padding: 15px;
        width: 200px;
        height: 100px;
        border-radius: 15px;
        display: flex;
        justify-content: space-between;
        border: 1px solid red;
    }

    .detailDataDiv{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .green{
        background-color: darkturquoise;
    }
    .red{
        background-color: darkmagenta;
    }
    .yellow{
        background-color: chocolate;
    }
    .blue{
        background-color: magenta;
    }


</style>
